import React, { Component } from 'react';
import { Table, Card } from 'antd';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

@connect(({ procedure, loading }) => ({
  procedure,
  loading: loading.effects['procedure/fetchTodo'],
}))
class ProcedureTodo extends Component {
  state = {
    currentTodoType: 'normal',
    currentTodoStatus: '-1',
  };

  columns = [
    {
      title: '请求标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '创建人',
      dataIndex: 'creator',
      key: 'creator',
    },
    {
      title: '创建日期',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '未操作者',
      dataIndex: 'unoperated',
      key: 'unoperated',
    },
  ];

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'procedure/fetchTodo',
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'procedure/clear',
    });
  }

  handleTypeChange = key => {
    this.setState({
      currentTodoType: key,
    });
  };

  handleStatusChange = key => {
    this.setState({
      currentTodoStatus: key,
    });
  };

  render() {
    const {
      procedure: { todoList },
      loading,
    } = this.props;
    const { currentTodoType, currentTodoStatus } = this.state;

    const newTodoList = todoList.filter(item => item.group === currentTodoType);

    const currentData =
      currentTodoStatus === '-1'
        ? newTodoList
        : newTodoList.filter(item => item.status === currentTodoStatus);

    const tabTypeList = [
      {
        key: 'normal',
        tab: '日常工作',
      },
      {
        key: 'default',
        tab: '默认流程',
      },
    ];

    const tabStatusList = [
      {
        key: '-1',
        tab: '全部',
      },
      {
        key: '0',
        tab: '待处理',
      },
      {
        key: '1',
        tab: '待阅',
      },
      {
        key: '2',
        tab: '被退回',
      },
      {
        key: '3',
        tab: '被督办',
      },
      {
        key: '4',
        tab: '未读',
      },
      {
        key: '5',
        tab: '反馈',
      },
    ];

    return (
      <PageHeaderWrapper
        loading={loading}
        title="待办流程"
        tabActiveKey={currentTodoType}
        tabList={tabTypeList}
        onTabChange={this.handleTypeChange}
      >
        <Card
          bordered={false}
          tabList={tabStatusList}
          activeTabKey={currentTodoStatus}
          onTabChange={this.handleStatusChange}
        >
          <Table dataSource={currentData} columns={this.columns} />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default ProcedureTodo;
